<template>
  <a-modal
    v-model:visible="modalData.modalVisible"
    class="affirmModal"
    :centered="true"
    :footer="null"
    :closable="false"
    :destroyOnClose="true"
    :maskClosable="false"
    @cancel="closeModal(false)"
    width="384px"
  >
    <affirm-modal-body 
      @closeModal="closeModal"
      :title="title"
      :tipMsg="tipMsg"
    ></affirm-modal-body>
  </a-modal>
</template>

<script>
import { reactive } from '@vue/reactivity'
import AffirmModalBody from "./AffirmModalBody";
import { onMounted, watch } from '@vue/runtime-core';
export default {
  name: "AffirmModal",
  components: {
    AffirmModalBody,
  },
  props: {
    visible: {    //是否显示弹窗
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    tipMsg: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const modalData = reactive({
      modalVisible: false,
    });

    //关闭弹窗
    const closeModal = (res) => {
      context.emit("closeModal", res);
    }

    //监听弹窗的显示/隐藏
    watch(
      () => props.visible,
      (val) => {
        modalData.modalVisible = val;
      }
    )

   

    onMounted(() => {
        modalData.modalVisible = props.visible;
    });

    return {
      modalData,
      closeModal,
    }
  },
}
</script>

<style lang="less" scoped>

</style>

<style lang="less">
.affirmModal {
  .ant-modal-content {
    border-radius: 8px;
    .ant-modal-body {
      padding: 0px;
    }
  }
}
</style>